<!--  frame 个人消息 -->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
  <meta name="divport" content="width=device-width,initial-scale=1,user-scalable=no" />
  <meta name="format-detection" content="telephone=no,email=no,date=no,address=no" />
	<title>个人消息</title>
	<link rel="stylesheet" href="../plugin/hhframe/hhframe.min.css" />
	<link rel="stylesheet" href="../style/index.css"/>

	<style>

	body {
	  /*background-color:#F8F8F8;*/
	}
	/* pages/my/bind_phone/bind_phone.wxss */

	page {
		  background-color:#F8F8F8;
		}
		.kapians{
			justify-content: center;
			padding: .20rem;
			display: flex;
			flex-direction: column;
		}
		.kp{
			display: flex;
			align-items: center;
			background-color: #FFFFFF;
			border-radius: .10rem;
			padding: .20rem;
			margin-bottom: .20rem;
		}
		.kp-img{
			width: .70rem;
			height: .70rem;
			border-radius: .07rem;
		}
		.kp-text{
			padding:0 0 0 .20rem;
			width: 6.00rem;
			/* background: #00BFFF; */
		}
		.kp-text1{
			display: flex;
			justify-content:space-between;
			margin-bottom: .10rem;
		}
		.kp-text1-title{
			font-size: .28rem;
			color: #000000;
			width: 3.30rem;
			font-weight: 600;
		}
		.kp-text1-sj{
			font-size: .26rem;
			color: #999999;
			display: flex;
		}
		.kp-text2{

			font-size: .26rem;
			color: #999999;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.zhuangtai{

		}
		.btn{
			display: flex;
			justify-content: flex-end;
			padding: .10rem .20rem;
		}
		.top-text{
			color: #999999;
			font-size: .24rem;
			height: .80rem;
			background: #f5f5f5;
		}
		.img{
			margin-bottom:.20rem;
		}
		.tishi{
			height: 3.66rem;
			width: 4.60rem;
			border-radius:10px;
			background: #FFFFFF;

		}
		.text{
			display: flex;
			flex-direction: column;
			align-items: center;

		}
		.text-w{
			width: 3.08rem;
			display: flex;
			flex-direction:column;
			align-items: center;
		}
		.text1{
			font-size: .30rem;
			color: #333333;
			font-weight: 600;
			margin-bottom: .16rem;
		}
		.text2{
			font-size: .28rem;
			color: #666666;
		}
		.lading{
			display: flex;
			justify-content: center;
			align-content: center;
			font-size: .30rem;
			color: #aaa;
			margin-bottom: .50rem;

		}
		.dian-div{
			display: flex;
			justify-content: center;
			align-items: center;
			margin-left: .10rem;
		}
		.dian{
			height: .15rem;
			width: .15rem;
			border-radius: .10rem;
			background: #19be6b;
		}
	</style>
</head>
<body>
	<div class="content app" v-cloak>

<div class="content">
  <div class="kapians">
    <div class="kp" v-for="(item,index) in list" :key="item" @click="commentRead(item)" >
      <image class="kp-img" :src="item.cover_img+'?imagediv2/1/w/135/h/135'" mode=""></image>
      <div class="kp-text">
        <div class="kp-text1">
          <div class="kp-text1-title">
            资讯评论回复消息通知
          </div>
          <div class="kp-text1-sj">
            {{item.time}}
          </div>
          <div class="kp-text1-sj">
            {{item.is_read ? '已读' : '未读'}}
            <div v-if="!item.is_read" class="dian-div">
              <div class="dian"></div>
            </div>
          </div>

        </div>
        <div class="kp-text2">
          {{item.content}}
        </div>
      </div>
    </div>
  </div>

  <div v-if="list.length != 0" class="lading">
    <div v-if="lading == 1">上拉加载</div>
    <div v-if="lading == 2">正在加载...</div>
    <div v-if="lading == 3">没有更多数据了</div>
  </div>
  <div v-if="isbz && list.length == 0" class="no-data">
		<img src="../image/information.png" alt="">
    <div class="">暂无消息通知</div>
  </div>
</div>
	</div>
</body>
<script src="../plugin/jquery.js"></script>
<script src="../plugin/vue.all.js"></script>
<script src="../plugin/hhframe/hhframe.min.js"></script>
<script src="../plugin/public.js"></script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
window.addEventListener("apiready",function(){
	index()
});

function index()
{
	var vm = new Vue({
		el: ".app",
		data: {
			page:1,
			size:20,
			lading:1,
			list:[],
			isbz:false,
		},
		mounted: function(){
				this.getdata() //获取数据
				this.setCustomRefreshHeaderInfo()
				this.vmaddEventListener()
		},
		methods: {
			// 下拉刷新
			setCustomRefreshHeaderInfo: function(){
				api.setCustomRefreshHeaderInfo({
							bgColor: '#eee',
							tips: {
									pull: '下拉刷新',
									threshold: '松开立即刷新',
									load: '正在刷新'
							}
					}, function() {
							vm.getdata() //获取数据
					});
			},


			// 上拉加载
			vmaddEventListener: function () {
				api.addEventListener({
						name: 'scrolltobottom',
						extra: {
								threshold: 0 //设置距离底部多少距离时触发，默认值为0，数字类型
						}
				}, function(ret, err) {
					vm.getdataPush()//获取数据  上拉加载
				});
			},

			//获取消息通知列表
			  getdata: function(loader) {
					this.lading= 2
					this.page = 1
					let param = {
							page: this.page,
						  size: this.size,
					}
					AjaxSafe({
				   		url:"/xapp/user/commentReply",
				    	data:param,
				    	loader:loader,
						success: function(ret) {
								vm.list= ret.page.list
							if(ret.page.list.length == vm.size){
									vm.lading= 1
							}else{
									vm.lading= 3
							}
							api.refreshHeaderLoadDone()//关闭下拉刷新状态
							vm.isbz = true
						},
						failed: function(err){
						  	api.refreshHeaderLoadDone()//关闭下拉刷新状态
								alert("网络故障！");
						}
					});
			  },
				//点击跳转设为已读
			  commentRead: function(item) {
					let param = {
								reply_id:item.id
					}
					AjaxSafe({
				   		url:"/xapp/user/commentRead",
				    	data:param,
				    	loader:true,
						success: function(res) {
							vm.getdata()
							message_detail(item.newsId)
						},
						failed: function(err){
								alert("网络故障！");
						}
					});
			  },


			  //获取消息通知  上拉加载
			  getdataPush: function() {
			  	  if(this.lading == 3) return

			  	  this.lading= 2
			  	  ++this.page
						let param = {
							page: this.page,
							size: this.size,
						}
						AjaxSafe({
					   		url:"/xapp/user/commentReply",
					    	data:param,
					    	loader:false,
							success: function(ret) {
									let list = [...vm.list,...ret.page.list]
									vm.list = list
									if(ret.page.list.length == vm.size){
													vm.lading= 1
									}else{
													vm.lading= 3
									}
							},
							failed: function(err){
									alert("网络故障！");
							}
						});
			  },





		},

	});
}

</script>
</html>
